<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>点击穿透问题</title>

	<style type="text/css">
	body{
		margin: 0;
	}
	.container{
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	.layer-title{
		width: 100%;
		margin: 50px 0;
		text-align: center;
	}
	.layer-action{
		position: absolute;
		bottom: 20px;
		width: 100%;
		text-align: center;
	}
	.btn{
		background-color: #08c;
		border: 0;
		color: #fff;
		height: 30px;
		line-height: 30px;
		width: 100px;
	}

	#underLayer{
		background-color: #eee;
		width: 90%;
		height: 500px;
		line-height: 500px;
		margin: 30px auto 1000px;
		text-align: center;
	}

	#popupLayer{
	
		background-color: #fff;
		width: 80%;
		height: 200px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -40%;
		margin-top: -100px;
		z-index: 1;
	}

	#bgMask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.6);
	}
	</style>
</head>
<body>
<!-- 原始触发顺序 touchstart>touchmove>touchend>tap>click -->
	<!-- click 和touch  或者tap的选择 -->    
	<!-- 1.选择使用click事件时  导入fastclick 可以解决300ms 延迟问题,并且没有穿透事件发生 -->
	<!-- 2.由于用click事件时,需要导入第三方库去解决300ms 延迟,那么采用tap(移动端原生并没有tap事件,是通过监听绑定touch事件模拟出来的)或者touch事件时则不需要导入第三方库 ,只需要解决穿透问题,因为页面的穿透问题并不多,解决方法也简单-->


	<!-- 穿透问题发生的情景   touch和tap都会发生的问题-->
	<!-- 1.点击弹出框(广告或者内容等等弹出的东西)的关闭按钮，弹出框消失后会触发按钮下面元素的click事件
弹出框的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发之后，弹出框消失了，300ms后这个click事件就是按钮下面的元素，因为弹出框已经消失了,那么就触发了下面元素的click事件 -->
<!-- 2.页面跳转 如果下面的元素是a标签那么就会跳转页面 因为a标签的herf就是自带click事件的 -->
<!-- 3.如果底层元素是select框或者radio或者checkbox或者a标签或者input或者默认弹出键盘或者有click事件等等能被click触发的都会发生穿透,然后被触发 -->
<!-- 如果下方这个元素没有这些click的话,是不会发生穿透的 -->


	<!-- 点击穿透解决方法总结 -->
	<!-- 1.使用fastclick库，其实现思路是，取消 click 事件，用 touchend 模拟快速点击行为,从此所有点击事件都使用click，不会出现“穿透”的问题，并且没有300ms的延迟。但需要导入一个第三方库 同时也有bug 会出现在安卓系统的浏览器上 在A页面中有个 a button，在B页面中有个b button,而且这两个按钮位于同一个位置,给a和b注册一个click事件,a的click事件触发后跳转到B页面.当a被点击后跳转到B页面,然后发现B按钮的click事件也被出发了.事件穿透了两个页面.但是一般不会这么巧设置两个按钮的位置.-->
	<!-- 2.给元素设置pointer-events:none; 那么就不会监听这个元素 此乃c3属性,并不是指针事件 -->
	<!-- 3. 用jquery的fadeout原理 设置动画duration大于300ms，让这个元素不是瞬间消失,那么300ms后click就无法穿透到下方的这个元素。-->
	<!-- 4.用preventDefault()阻止  监听touchend事件，并在事件中使用preventDefault()阻止；如下使用preventDefault()阻止  //$("#closePopup").on("touchend",function(event) {
 //   event.preventDefault();
 // });-->
 	<!-- 5. 动态生成一个透明元素在触摸的地方,那么上层元素消失时,而这个时候延迟的click来了,那么click的是透明元素,就无法穿透到底层元素,然后设置一个timeout让透明元素移除-->


	<div class="container">
		<div id="underLayer">我是底层元素</div>

		<div id="popupLayer">
			<div class="layer-title">弹出层页面</div>
			<div class="layer-action">
				<button class="btn" id="closePopup">关闭</button>
			</div>
		</div>
	</div>
	<div id="bgMask"></div>


	<script src="js/zepto.min.js"></script>

	<script type="text/javascript">
	
		var $close = $('#closePopup');
		var $popup = $('#popupLayer');
		var $under = $('#underLayer');
		var $mask = $('#bgMask');

		$close.on('tap', function(e){
			$popup.hide();
			$mask.hide();
		});

		$under.on('click', function(){
			alert('underLayer clicked 我是最底层元素');
		});

	
	</script>
</body>
</html>